<template>
  <div class="center">
    <!-- <div class="center-header">
      <div class="comeplay">
        <span>欢迎来到XXX主持人团队！ 客服：13812341234</span>
      </div>
      <div class="loginRegister">
        <button class="login">登录</button>
        <button class="register">注册</button>
      </div>
    </div> -->
    <Head />
    <div class="logo">
      <img src="../../../assets/logo.png" alt="" />
    </div>
    <div class="midLand">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我的预订" name="first" class="pullBox">
          <Select />
          <TableFrom />
        </el-tab-pane>
        <el-tab-pane label="个人资料" name="second">
          <PersonalData />
        </el-tab-pane>
        <el-tab-pane label="我的假期" name="third">
          <MyHoliday />
        </el-tab-pane>
        <el-tab-pane label="管理费缴纳" name="fourth">
          <PayMent />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="sorter">
      <Pagination />
    </div>
    <Footer />
  </div>
</template>

<script>
import Head from "../../../components/Head";
import Footer from "../../../components/Footer";
import PersonalData from "./PersonalData";
import MyHoliday from "./MyHoliday";
import PayMent from "./PayMent";
import Select from "./Select";
import TableFrom from "./TableFrom";
import Pagination from "../Pagination";
export default {
  name: "Reserve",
  data() {
    return {
      activeName: "fourth",
    };
  },
  components: {
    Head,
    Footer,
    PersonalData,
    MyHoliday,
    PayMent,
    Select,
    TableFrom,
    Pagination,
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped lang="less">
.center {
  width: 100%;
}
.logo {
  margin-left: 100px;
  margin-top: 20px;
  margin-bottom: 60px;
  width: 210px;
  height: 80px;
}
.center-header {
  position: relative;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: darkgrey;
}
.midLand {
  margin-left: 50px;
}
.comeplay {
  margin-left: 50px;
}
.loginRegister {
  position: absolute;
  top: 5px;
  right: 10px;
  margin-right: 50px;
}
.pullBox {
  width: 90%;
  margin-right: 50px;
  padding: 10px;
  height: 500px;
}
.AddOrder {
  padding-left: 100px;
  margin-left: 810px;
  color: red;
}
.sorter {
  bottom: 0px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 30px;
}
</style>